<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>react 练习part12</title>
		<script src="../build/react.js"></script>
    	<script src="../build/react-dom.js"></script>
    	<script src="../build/browser.min.js"></script>
    	<script src="../build/jquery.min.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/babel">
			var RepoList = React.createClass({
				getInitialState:function(){
					return {
						loading:true,
						error:null,
						data:null
					};
				},
				componentDidMount(){
					this.props.promise.then(
						value => this.setState({loading:false,data:value}),
						error => this.setState({loading:false,error:error})
					);
				},
				render:function(){
					if(this.state.loading){
						return <span>Loading...</span>;
					}
					else if(this.state.error!==null){
						return <span>Error:{this.state.error.message}</span>;
					}
					else{
						var repos = this.state.data.items;
						var repoList = repos.map(function(repo,index){
							return (
								<li key={index}>
									<a href={repo.html_url}>{repo.name}</a>({repo.stargazers_count} stars)<br/>{repo.description}
								</li>
							);
						});
						return(
							<main>
								<h1>Most Popular JavaScript Project in Github</h1>
								<ol>{repoList}</ol>
							</main>
						)
					}
				}
			})
			
			ReactDOM.render(
				<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
				document.getElementById('app')
			)
		</script>
	</body>
</html>
